 .flex {
  display: flex;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex-center-wrap {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

/*-----------------------------------------------顶部对齐，水平方向的4中布局-------------------------------------------*/
.flex-row-top-center {
  display: flex;
  justify-content: center;
}

.flex-row-top-right {
  display: flex;
  justify-content: flex-end;
}

.flex-row-top-between {
  display: flex;
  justify-content: space-between;
}

.flex-row-top-around {
  display: flex;
  justify-content: space-around;
}

/*-----------------------------------------------垂直居中时，水平方向的5中布局-------------------------------------------*/
.flex-row-center-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-row-center-left {
  display: flex;
  align-items: center;
}

.flex-row-center-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-row-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-row-center-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/*-----------------------------------------------底部对齐，水平方向的5中布局-------------------------------------------*/
.flex-row-bottom-center {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.flex-row-bottom-left {
  display: flex;
  align-items: flex-end;
}

.flex-row-bottom-right {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.flex-row-bottom-between {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.flex-row-bottom-around {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}


/*-----------------------------------------------主轴是纵向，左边的4个布局-------------------------------------------*/
.flex-column-left-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-column-left-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.flex-column-left-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flex-column-left-around {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/*-----------------------------------------------主轴是纵向，中间的5个布局-------------------------------------------*/
.flex-column-center-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-column-center-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-column-center-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.flex-column-center-between {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.flex-column-center-around {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

/*-----------------------------------------------主轴是纵向，右边的5个布局-------------------------------------------*/
.flex-column-right-center {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.flex-column-right-top {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.flex-column-right-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.flex-column-right-between {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.flex-column-right-around {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
}


/*--------------------------------------------------------flex的比例--------------------------------------------------------*/
.flex1 {
  flex: 1;
}

.flex1-1 {
  flex: 1.1;
}

.flex1-2 {
  flex: 1.2;
}

.flex1-3 {
  flex: 1.3;
}

.flex1-4 {
  flex: 1.4;
}

.flex1-5 {
  flex: 1.5;
}

.flex1-6 {
  flex: 1.6;
}

.flex1-7 {
  flex: 1.7;
}

.flex1-8 {
  flex: 1.8;
}

.flex1-9 {
  flex: 1.9;
}

.flex2 {
  flex: 2;
}

.flex3 {
  flex: 3;
}

.flex4 {
  flex: 4;
}

.flex5 {
  flex: 5;
}

.flex6 {
  flex: 6;
}

.flex7 {
  flex: 7;
}

.flex8 {
  flex: 8;
}

.flex9 {
  flex: 9;
}

.flex10 {
  flex: 10;
}

/* 常用间距 */

.gap5 {
  gap: 5px;
}

.gap10 {
  gap: 10px;
}

.gap15 {
  gap: 15px;
}

.gap16 {
  gap: 15px;
}

.gap20 {
  gap: 20px;
}

.gap25 {
  gap: 25px;
}

.gap30 {
  gap: 30px;
}

.gap40 {
  gap: 40px;
}



/*--------------------------------------------------------gird网格布局--------------------------------------------------------*/
.grid {
  display: grid;
}

.inline-gird {
  display: inline-grid;
}
